<script setup>
    import { onMounted, watch } from "vue";
    import tools from "../tools/index.js";
    // 接收父组件传入的数据：当前选中的项的索引
    const props = defineProps({
        active:{
            type:Number,
            default: 0
        }
    })
    // 监听传入索引的变化：重新传入要使用该索引的自定义事件
    watch(()=>props.active, ()=>{
        tools.E.emit("getIndex", props.active);
    })
    // 初始将当前选中的项的索引，传入要使用该索引的自定义事件
    onMounted(()=>{
        tools.E.emit("getIndex", props.active);
    })

</script>

<template>
    <div class="list-bar">
        <slot></slot>
    </div>
</template>

<style scoped>
    .list-bar{
        width:95%;
        height:50px;
        margin: 0 auto;
        display:flex;
        background: #ccc;
    }

</style>